<template>
    <div class="home">
        <van-row type="flex" justify="space-between" class="banner">
            <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_ping.png')"/>
            <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
        </van-row>
        <!--课程内容-->
        <van-tabs v-model="activeName" class="tabs" @change="tabsChangeHandle">
            <van-tab title="律动课程" name="rhythm_video">
                <div class="video_content" :ref="'video'+options.fileID"   v-if="options.fileID&&activeName==='rhythm_video'">
                    <TencentPlayer :options="options" :width="width" :height="height"></TencentPlayer>
                </div>
                <van-cell-group class="main_panel">
                    <h3 class="title">{{course.title}}</h3>
                    <div class="course_item_info">
                        <div class="item_title"><span>水平</span><span>难度</span><span>时长</span><span>人数</span></div>
                        <div class="item_content">
                            <span>{{course.level}}</span>
                            <span>{{course.difficulty}}</span>
                            <span>{{course.duration}}</span>
                            <span>{{course.people_num}}</span>
                        </div>
                        <div class="item_title"><span>上肢力量</span><span>下肢力量</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.sz" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.xz" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                        <div class="item_title"><span>柔韧性</span><span>协调性</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.rr" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.xt" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                        <div class="item_title"><span>平衡性</span><span>灵敏性</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.ph" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.lm" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                    </div>
                </van-cell-group>
            </van-tab>
            <van-tab title="游戏课程" name="game_video">
                <div class="video_content" :ref="'video'+options.fileID" v-if="options.fileID&&activeName==='game_video'">
                    <TencentPlayer :options="options" :width="width" :height="height"></TencentPlayer>
                </div>
                <van-cell-group class="main_panel">
                    <h3 class="title">{{course.title}}</h3>
                    <div class="course_item_info">
                        <div class="item_title"><span>水平</span><span>难度</span><span>时长</span><span>人数</span></div>
                        <div class="item_content">
                            <span>{{course.level}}</span>
                            <span>{{course.difficulty}}</span>
                            <span>{{course.duration}}</span>
                            <span>{{course.people_num}}</span>
                        </div>
                        <div class="item_title"><span>上肢力量</span><span>下肢力量</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.sz" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.xz" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                        <div class="item_title"><span>柔韧性</span><span>协调性</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.rr" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.xt" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                        <div class="item_title"><span>平衡性</span><span>灵敏性</span></div>
                        <div class="item_content">
                            <span><van-rate :count="course.ph" void-icon="star" void-color="#FFB403"/></span>
                            <span><van-rate :count="course.lm" void-icon="star" void-color="#FFB403"/></span>
                        </div>
                    </div>
                </van-cell-group>
            </van-tab>
            <van-tab title="教案" name="teachingt_img">
                <van-cell-group class="main_panel teachingt_img_panel " >
                    <van-image
                            width="100%"
                            height="100%"
                            :src="course.teachingt_img">
                        <template v-slot:loading >
                            <van-loading type="spinner" size="20" />
                        </template>
                    </van-image>
                </van-cell-group>
                <p class="download_tips">长按图片可保存教案图片到手机相册</p>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
// @ is an alias to /src
import TencentPlayer from '../../components/TencentPlayer.vue'
import $api from "@/api/index";
export default {
  name: "courseDetail",
  components: {TencentPlayer},
  data() {
    return {
      activeName: 'game_video',
      course:{},
      options: {
        autoplay: true,  // 自动播放（腾讯云播放地址测试可以自动播放）
        fileID: "", // 请传入需要播放的视频fileID 必须
        appID: "1256051987" // 请传入点播账号的子应用appID 必须
      },
      width:'0',
      height:'0'
    };
  },
  created(){
    this.getCurriculumInfo() //get course info
  },
  methods: {
    // 获取班级课程
    getCurriculumInfo(){
      let {improve_id,class_id,key}=this.$route.query
      console.log(improve_id,class_id,key)
      let loading=this.$toast.loading({
        message: '课程加载中...',
        forbidClick: true,
        duration:0,
        loadingType: 'spinner',
      });
      $api.school.getCurriculumInfo({improve_id,class_id,key}).then(res => {
        this.course=res.data
        this.setVideo(this.activeName)
      }).finally(res => {
        loading.clear()
      })
    },
    setVideo(name){
      try {
        console.log(this.course[name])
        this.options.fileID=this.course[name]
        setTimeout(()=>{
          this.width=this.$refs['video'+this.course[name]].offsetWidth
          this.height=this.$refs['video'+this.course[name]].offsetHeight
        })
      }catch (err){}

    },
    tabsChangeHandle(v){
      if(v==='teachingt_img') return false
      this.setVideo(v)
    }
  }
}
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 264px;
            height: 283px;
            margin-left: 35px;
            margin-top: -15px;
        }
        .main_panel {
            padding: 0 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            .title {
                text-align: center;
                font-size: 28px;
                font-weight: bold;
                color: #333333;
                line-height: 36px;
            }
        }
        .tabs {
            height: 74px;
            box-shadow: 0px 2px 9px 0px rgba(51, 51, 51, 0.1);
            .van-tabs__wrap{
                height: 100%;
            }
            .van-tab__pane{
                padding-bottom: 10px;
            }
            .van-tab {
                font-size: 28px;
                color: #999999;
            }
            .van-tab--active {
                span {
                    color: #FF804E;
                    padding: 8px 30px;
                }
            }
            .van-tabs__line {
                background: #FF804E;
            }
            .course_list_panel {
                margin-top: 20px;
            }
        }
        .course_item_info {
            width: 100%;
            border-bottom: 1px solid #E6E6E6;
            box-sizing: border-box;
            padding: 0 10px;
            &:last-child {
                border-bottom: 0;
            }
            .item_title, .item_content {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                height: 66px;
            }
            .item_title {
                font-size: 28px;
                background: #FDF4F0;
                height: 66px;
                font-weight: 700;
                color: #515151;
            }
            .item_content {
                font-size: 26px;
                color: #999999;
                span{
                    flex: 1;
                    display: flex;
                    justify-content: center;
                }
            }
        }
        .video_content{
            height: 422px;
        }
        .teachingt_img_panel{
            height: 950px;
            padding: 0;
        }
        .download_tips{
            margin:10px auto 20px;
            border-radius: 10px;
            color: #666;
            font-size: 26px;
            text-align: center;
        }
    }
</style>
